<template>
  <div class="flex">
    <aCard title="基本用法">
      <aSpin></aSpin>
    </aCard>
    <aCard title="不同尺寸">
      <a-spin :size="28" />
      <a-spin :size="32" />
      <a-spin />
    </aCard>
    <aCard title="容器中">
      <a-spin :loading="loading" tip="This may take a while...">
        <a-card title="Arco Card">
          ByteDance's core product, Toutiao ('Headlines'), is a content platform
          in China and around the world. Toutiao started out as a news
          recommendation engine and gradually evolved into a platform delivering
          content in various formats.
        </a-card>
      </a-spin>
    </aCard>
    <aCard title="容器中">
      <a-spin tip="This may take a while..." />
    </aCard>

    <aCard title="自定义图标">
      <a-spin>
        <template #icon>
          <svgIcon name="xihuan" spin></svgIcon>
        </template>
      </a-spin>
    </aCard>
  </div>
</template>

<script setup lang="ts">
import aSpin from "@/ArcoUni/components/arco-Spin/index.vue";
import aCard from "@/ArcoUni/components/arco-card/index.vue";
import svgIcon from "@/ArcoUni/components/arco-icon/index.vue";
import { ref } from "vue";
const loading = ref(true);
setInterval(() => {
  loading.value = !loading.value;
}, 5000);
</script>

<style lang="scss" scoped>
.flex {
  height: 100vh;
  padding: 200rpx 20rpx;
  //   background: #e5e5e5;
}
:deep(.arco-card) {
  margin-bottom: 30rpx;
}

:deep(.arco-tag) {
  margin: 15rpx 10rpx;
}
</style>
